<template>
	<view>
		<view class="mask" @touchmove.prevent v-if="isShow">
			<view
				class="prop"
				:style="{
					width: width + 'rpx',
					height: height + 'rpx'
				}"
			>
				<view class="prop-title" v-if="isHeader">
					<view v-if="isTitle">{{ title }}</view>
					<text class="iconfont" v-if="isClose" @tap="close">&#xe784;</text>
				</view>
				<view class="prop-value">
					<slot></slot>
				</view>
				<view class="prop-btn" v-if="isBtn">
					<view
						class="prop-btn__item"
						:style="{
							color: cancelColor
						}"
						@tap="close"
						>{{ cancelText }}</view
					>
					<view
						class="prop-btn__item"
						:style="{
							color: confirmColor
						}"
						@tap="success"
						>{{ confirmText }}</view
					>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShow: false
		};
	},
	props: {
		title: {
			type:[String, Number],
			default:'标题'
		},
		isHeader:{
			type:Boolean,
			default:true
		},
		isTitle: {
			type: Boolean,
			default: true
		},
		isClose: {
			type: Boolean,
			default: false
		},
		value: [String, Number],
		showCancel: {
			type: Boolean,
			default: true
		},
		isBtn: {
			type: Boolean,
			default: true
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		cancelColor: {
			type: String,
			default: '#000000'
		},
		confirmText: {
			type: String,
			default: '确定'
		},
		confirmColor: {
			type: String,
			default: '#3CC51F'
		},
		width: {
			type: [String, Number],
			default: '628'
		},
		height: [String, Number]
	},

	mounted() {},

	methods: {
		open() {
			this.isShow = true;
		},
		close() {
			this.$emit('close');
			this.isShow = false;
		},
		success() {
			this.$emit('success');
			this.isShow = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.mask {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	.prop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background: white;
		border-radius: 12rpx;
		.prop-title {
			text-align: center;
			font-size: 32rpx;
			margin-top: 44rpx;
			position: relative;
			.iconfont {
				position: absolute;
				top: -20rpx;
				right: 20rpx;
				font-size: 40rpx;
			}
		}
		.prop-btn {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			border-top: 1px solid #f7f7f7;
			.prop-btn__item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				height: 102rpx;
			}
		}
	}
}
</style>
